import { reactive, computed, watch, onMounted, getCurrentInstance } from 'vue'

export default function useTest () {
  const { ctx } = getCurrentInstance()

  const state = reactive({
    count: 1
  })

  const increment = () => {
    state.count++
  }

  const goToAbout = () => {
    ctx.$router.push('/about')
  }

  const updateNumber = () => {
    // ctx.$store.commit('SET_NUMBER', state.count * 100)
    ctx.$store.dispatch('setNumber', state.count * 200)
  }

  const updateAA = () => {
    ctx.$store.commit('SET_AA', ctx.$store.state.a.aa + 1)
  }

  const doubleCount = computed(() => state.count * 2)

  const number = computed(() => ctx.$store.state.number)

  // const aa = computed(() => ctx.$store.state.a.aa)

  const aa = computed(() => ctx.$store.getters.aaValue)

  const bb = computed(() => ctx.$store.state.b.bb)

  watch(() => state.count, () => {
    console.log('state.count changed:' + state.count)
  })

  onMounted(() => {
    console.log('onMounted...')
  })

  return {
    state,
    doubleCount,
    number,
    aa,
    bb,
    increment,
    goToAbout,
    updateNumber,
    updateAA
  }
}
